<template>
	<view class="page">
		<view class="topprice">
			账户可用洁净币 ¥{{wallet.balance || 0}} 冻结金额 ¥{{wallet.freezeBalance || 0}}
		</view>
		<view class="bg"> </view>

		<view class="adress" >
			<view class=""   >
				<view class="a1">{{serveInfo.receiverName}} {{serveInfo.receiverMobile}}</view>
				<view class="a2">{{serveInfo.receiverDetailAddress}} </view>
			</view>
			
		</view>
		<!--保洁单1 工程单2 陪护单3 -->
		<view class="form">
				<view class="list">
					<view class="title">服务项目：</view>
					<view class="inp"   >
						{{serveInfo.categoryName }}  
					</view>
					 
				</view>
				 
				<view class="list"   >
					<view class="title">服务日期：</view>
					<view class="inp"  >
						{{serveInfo.serviceStartTime}}/{{serveInfo.serviceEndTime}} {{serveInfo.serviceDate || ''}}
						 
					</view>
					 
				</view>
				<view class="list"  >
					<view class="title">服务时间：</view>
					<view class="inp" >
						<u-icon name="minus-circle" color="#2979ff" size="28" @click="add('minus')"></u-icon> 
						
						<text style="width: 150rpx;text-align: center;"> {{ serviceSection || "0"}}小时	</text>
						
						<u-icon name="plus-circle" color="#2979ff" size="28" @click="add('plus')"></u-icon>
					</view>
				</view>
				<view class="list"  >
					<view class="title">服务人数：</view>
					<view class="inp"  >
						 {{serveInfo.serviceNum}}人
					</view>
				</view>
				  
				<template>
					<view class="list" v-for="(item,index) in orderStaffDO" :key="item.name">
						<view class="title">{{'服务人员'+(index+1)}}：</view>
						<view class="inp" @click="showperson">
							<text v-if="orderStaffDO.length==0">选择人员</text>
							<view v-else>
								<text >{{item.name}}</text>
							</view>
							 
						</view>
					</view>
				</template>
				<view class="list"  >
					<view class="title">工具使用：</view>
					<view class="inp"  >
						{{serveInfo.toolUsage}}
					</view>
				</view>
			 
		</view>
		
		<view class="form">
			<view class="upimage">
				<view class="title2">
					上传现场照片：<text>便于服务人员携带工具（最多上传3张）</text>
					</view>
				<view class="up3">
					<view class="img" v-for="(item,index) in images" :key="index">
						<image :src="item" class="image"  @click="lookImg(index)"></image>
						<view class="del">
							<u-icon slot="right" name="close" @click="delimg(index)" size="12"></u-icon>
							
						</view>
 					</view>
					<view class="add" @click="addimg()" v-if="images.length<3">
						<view>+</view>
					</view>
				</view>			
			</view>
			<view class="flex" style="justify-content: space-between;">
				<view class="title2"> 客户留言：  </view>
				<view class="flex">
					<input type="text" v-model="serveInfo.remark" placeholder="选填" style="text-align: right;"> 
					 
				</view>			
			</view>
		</view>
		<view class="form"  >
			 
			<view class="flex" style="justify-content: space-between;">
				<view class="title2"> 是否有宠物：  </view>
				<view class="flex">
					 {{serveInfo.isPet=="1"?"有":"没有" }}
				</view>			
			</view>
		</view>
		
	
		
		 <u-popup :show="footvisible" :round="10" mode="bottom" :closeOnClickOverlay="true" :closeable="true" 
		 :zIndex="10070" @close="footvisible=false">
		 	<view class="popup">
		 		<view class="tip">
		 			 <text>价格明细</text>
		 		</view>
		 		<view style="margin-top:30rpx;">
		 			<view class="box">
		 				 <!-- 0 平台劵 1 员工劵 2 商户劵 3 商户给员工的优惠劵 -->
		 				<view class="a">
		 					<view style="font-size: 32rpx;">服务总价</view> 
		 					<text style="font-size: 32rpx;">￥{{totalMoney || '-'}}</text>
		 				</view> 
		 				<view class="a" @click="tourl('/pages/my/coupon?type=0')">
		 					<view style="font-weight: 400;">平台优惠券</view> 
		 					<view>
		 						 <text>加时订单不能使用优惠券</text>
		 					</view>
		 				</view>  
		 				<view class="a" @click="tourl('/pages/my/coupon?type=2')">
		 					<view style="font-weight: 400;">商户优惠券</view> 
		 					<view>
		 						 <text>加时订单不能使用优惠券</text>
		 					</view>
		 				</view> 
		 				<view class="a" @click="tourl('/pages/my/coupon?type=1,3')">
		 					<view style="font-weight: 400;">员工优惠券</view> 
		 					 
							<view>
								 <text>加时订单不能使用优惠券</text>
							</view>
		 				</view> 
		 				<view class="a">
		 					<view style="font-weight: 400;">交通补贴</view> 
		 					<text>加时订单无交通补贴</text>
		 				</view> 
		 				 
		 				<view class="a">
		 					<view>总计</view> 
							<view style="color: #277EEF;">
								￥<text style="font-size: 40rpx;color: #277EEF;">{{actualMoney || 0}}</text>
							</view> 
		 				</view> 
		 				 
		 			</view> 
		 			 
		 		</view>
		 		 
		 	</view>
		 </u-popup> 
		  
		<view class="orderfooter" style="z-index: 10071;" v-if="!serveInfo.categoryName">
			  <text>请选择您需要的服务进行预约！</text>
			  <view>提交申请</view>
		</view>
		<view class="orderfooter" style="z-index: 10071;" v-else>
		  <view class="fn-col-left" >
			<view class="col-left">
				<!-- 1人服务 共26天 -->
			  <view>{{ serveInfo.serviceNum || 0}}人服务</view>
			  <view>共{{ serveInfo.serviceNum*serviceSection || 0}}小时</view>
			</view>
			<view class="col-right">
			  <view class="price-number">
				总计 ¥ <span class="price">{{ actualMoney || 0}}</span>
			  </view>
			  <view class="price-detaile" @click="showActions">
				价格明细 <uni-icons :type="showPrice ? 'bottom' : 'top'" size="16"></uni-icons>
			  </view>
			</view>
		  </view>
		  <view class="woodsbtn" @click="handleSubmit">
			立即预约
		  </view>
		</view>
		
		
		<chose-time ref="choseTime" @handleTime="handleTime"></chose-time>
		
	</view>
</template>

<script>
	import {mapMutations,mapState } from "vuex";
	import { calculateDaysBetweenDates,findBestCoupon,timeToDecimal,countSpecificWeekdays} from "@/utils/utils.js"
	import pro from "@/utils/uploadImg.js"
	import choseTime from "@/components/choseTime"
	import goodsSelect from "./components/goodsSelect.vue"
	import priceInfo from "./components/priceInfo.vue"
	import chosePerson from "@/components/chose-person.vue"
	import {goodsDetailsAPI} from "@/api/appointment.js"
	import {addressdefaultlistAPI,getwalletAPI,couponListAPI} from "@/api/user.js"
	import {createOrderAPI,settlementAPI,categoryListAPI,orderdetailAPI} from "@/api/order.js"
	 
	export default {
		components: {
			 
		},
		data() {
			return {
				footvisible:false, 
				 
				images: [],
				wallet:{//钱包
					
				},
				categoryId:"",//服务项目id
				serveInfo:{ //服务对象
					categoryName:"",
					serviceStartTime:"",
					serviceEndTime:"",
					serviceNum:"",
					timeCycle:"",
					serviceDate:"",
					isPet:"0",
					restDays:"",
					days:"",
					num:"",
					deadlineTime:"",
					remark:""
				},
				money:5, 
				orderStaffDO:[],
				orderType:"",//1 保洁单 2 工程单 3 陪护单
				 
				couponList1:[],//0 平台劵
				couponList2:[],//员工劵
				couponList3:[],//商户券
				categoryDia:false,
				totalDayNum:0,//保洁单专用-选中的工程单天数
				 
				id:"",
				serviceSection:0.5 
			}
		},
		watch:{
			
			 
		},
		 
		computed:{
		    ...mapState("common", ["adressinfo"]),
			// 服务单总价（不包含补贴）
			totalMoney(){
				 
				let total=0		
				if(this.money && this.serviceSection!=''  ){
					total=(Number(this.serveInfo.serviceNum)*Number(this.serviceSection))*this.money
				}
					
					 
				return total 
			},
			// 实付=总价-优惠券+补贴
			actualMoney(){
				let total=this.totalMoney || 0
				 
				// if(!this.money || !this.serveInfo.serviceStartTime){
				// 	return total
				// }
				// if(this.serveInfo.discountSystemPrice){
				// 	total=total - this.serveInfo.discountSystemPrice
				// }
				// if(this.serveInfo.discountStaffPrice){
				// 	total=total - this.serveInfo.discountStaffPrice
				// }
				// if(this.serveInfo.discountMerchantPrice){
				// 	total=total - this.serveInfo.discountMerchantPrice
				// }
				// if(this.serveInfo.subsidyMoney){
				// 	total=Number(total) + Number(this.serveInfo.subsidyMoney)
				// }
				// if(total<0)return 0
				return total
			},
			// totalDay(){
			//  return calculateDaysBetweenDates(this.serveInfo.serviceStartTime,this.serveInfo.serviceEndTime)
			// }
		},
		created() {
			this.getinit()
		},
		onLoad(option) {
			if(option.id){
				this.id=option.id
				this.goodsDetails()
			}
			 
		},
		methods: {
			...mapMutations("common",["SET_adressinfo"]),
			showActions(){
				this.footvisible=!this.footvisible
			}, 
			add(type){
				let serviceSection=this.serviceSection *1
				if(type=='minus'){
					if(serviceSection-0.5 <0){
						return uni.showToast({
							title:'不能再减啦',
							icon:'none'
						})
					}
					serviceSection-=0.5
				}else{
					
					serviceSection+=0.5
				}
				this.serviceSection=serviceSection
			}, 
		 
			handleSubmit(){
				uni.showLoading({
					title:'提交订单中'
				}) 
				var data={
					...this.serveInfo,
					subsidyMoney:0, 
					isAdd:true,
					totalMoney:this.totalMoney,
					actualMoney:this.actualMoney,
					images:this.images.join(","),
					remark:this.serveInfo.remark?this.serveInfo.remark:'',
					serviceSection:this.serviceSection,
					timeCycle:this.addTimeToCycle(this.serveInfo.timeCycle,this.serviceSection)
				}
				delete data.id 
				createOrderAPI(data,this.serveInfo.type).then(res=>{
					uni.hideLoading()
					uni.navigateTo({
						url:"/pages/order/payOrder?orderFrom="+this.serveInfo.type+"&id="+res.id
					})
				})
			}, 
			  
			 
			lookImg(val){
				const urls = this.images
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			delimg(i){
				this.images.splice(i,1);			
			},
			addimg(){
				if(this.images.length<=3){
					var num=9-this.images.length
					pro.choose_and_upload(num).then(res=>{
						 
						this.images=this.images.concat(res.img_urls)
					})
				}else{
					uni.showToast({
						title: '至多上传3张图片',
						duration: 2000,
						icon:"none"
					});
				}			
			},
			 
			 
			getinit(){
				// // 查地址
				// addressdefaultlistAPI().then(res=>{
				// 	this.SET_adressinfo(res)
				// })
				// 查余额
				getwalletAPI().then(res=>{
					this.wallet=res
				})
				// 获取可使用的优惠券
				 
				 
			},
			 
			goodsDetails(){
				orderdetailAPI({id:this.id}).then(res=>{
					this.serveInfo=res
					this.orderStaffDOS=res.orderStaffDOS
					this.images=res.images?res.images.split(",") :[]
					this.serviceTime=res.serviceStartTime
					this.serveInfo.subsidyMoney=0
					this.money=res.money?res.money:5
					
					this.serveInfo.subsidyMoney=""
					this.serveInfo.discountStaffPrice=""
					this.serveInfo.discountMerchantPrice=""
					this.serveInfo.discountSystemPrice=""
					this.serveInfo.staffCouponsId=''
					this.serveInfo.merchantCouponsId=''
					this.serveInfo.systemCouponsId=''
					
					this.orderType=res.type+'' 
					this.SET_adressinfo({
						name:res.receiverName,
						mobile:res.receiverMobile,
						detailAddress:res.receiverDetailAddress,
						areaAddress:res.areaAddress,
						id:res.addressId,
						longitude:res.longitude,
						latitude:res.latitude,
						receiverAreaId:res.receiverAreaId,
					}) 
					delete this.serveInfo.id 
				})
			},
			addTimeToCycle(timeCycle, addHours) {
			  // Step 1: 解析输入的时间段
			  const [startTimeStr, endTimeStr] = timeCycle.split('-');
			  const startTime = parseTime(startTimeStr);
			  const endTime = parseTime(endTimeStr);
			
			  // Step 2: 转换时间到分钟数
			  function parseTime(timeStr) {
			    const [hours, minutes] = timeStr.split(':').map(Number);
			    return hours * 60 + minutes;
			  }
			
			  // Step 3: 执行加时操作
			  const newEndTime = endTime + (addHours * 60);
			
			  // Step 4: 将结果转换回时间字符串
			  function formatTime(minutes) {
			    const hours = Math.floor(minutes / 60);
			    const mins = minutes % 60;
			    return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
			  }
			
			  // 确保新结束时间不超过一天的范围
			  const newEndTimeStr = formatTime(newEndTime % (24 * 60));
			  const newStartTimeStr = formatTime(endTime);
			
			  return `${newStartTimeStr}-${newEndTimeStr}`;
			}
 
			 
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding: 0 20rpx 150rpx;
	background-color: #F8F8F8;
	min-height: 100vh;
}

.bg {
	width: 100%;
	height: 300rpx;
	background: #277EEF;
	border-radius: 0rpx 0rpx 140rpx 140rpx;
	position: absolute;
	top: 100rpx;
	left: 0;
}
.tip{
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 38rpx;
	padding: 20rpx 10rpx;
}
.topprice {

	width: 100%;
	font-weight: 500;
	font-size: 28rpx;
	color: #277EEF;
	line-height: 100rpx;
	text-align: center;
}

.adress {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 30rpx;

	.a1 {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 53rpx;
	}

	.a2 {
		font-size: 24rpx;
		color: #999999;
		line-height: 48rpx;
	}
}

.form {
	position: relative;
	margin-top: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 0;
		.title{
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.inp {
		min-width: 200rpx; 
		display: flex;
		 
		justify-content: flex-end;
	}
	
}
 	
.upimage{
	  
	// margin-bottom: 100rpx;
	background-color: #fff;
	.title2{
		
		font-size: 30rpx;
		font-weight: 600;
		 
		line-height: 40rpx;
		text{
			font-size: 24rpx;
			font-weight: 400;
			color: #AAAAAA;
		}
		
	}
	.up3{
		margin:30rpx 0 0;
		
		display: flex;
		align-items: center;
		flex-wrap: wrap;		
		.img{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			margin-bottom: 30rpx;
			border-radius: 8px;
			position: relative;
			.image{
				width: 200rpx;
				height: 200rpx;
			}
			.del{
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				width: 30rpx;
				height: 30rpx;
				// border: 1px solid #999;
				// border-radius: 50%;
				// display: flex;
				// align-items: center;
				// justify-content: center;
			}
		}
		.add{
			width: 200rpx;
			height: 200rpx;
			background: #EEEFF2;
			border-radius: 8px;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			border: 1px dashed #c2c6d1;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			view{
				color: #7C8191;
				 
				text-align: center;
				// font-weight: bold;
				font-size: 68rpx;
			}
		}
	}
}

.orderfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx 30rpx;
	height: 120rpx;
	z-index: 9;
    background-color: #fff;
    text {
      font-size: 24rpx;
      color: #666;
    }
    
    .fn-col-left {
      flex-grow: 1;
	  view{
		  font-weight: 400;
		  font-size: 24rpx;
		  color: #666666;
	  }
      .col-left {
        display: inline-block;
        width: 45%;
        height: 80rpx;
        color: red;
      }
      .col-right {
        display: inline-block;
        width: 55%;
        height: 80rpx;
      }
      .price {
        font-size: 40rpx;
        font-weight: bold;
        line-height: 47rpx;
        color: $uni-color-primary;
      }
      .price-number {
        padding-left: 10rpx;
      }
      .price-detaile {
        width: 180rpx;
        height: 40rpx;
        padding: 0px 10rpx;
        font-size: 24rpx;
        color:$uni-color-primary;
        text-align: center;
        background: #F2F7FE;
        border-radius: 60rpx 60rpx 60rpx 60rpx;
      }
    }
}	
.popup {
    padding:10rpx 30rpx 120rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.box{
		 
		border-radius: 15rpx;
		background-color: #fff;
		margin: 30rpx 0;
		 
		.a{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:30rpx 0;
			
			view{
				
				font-weight: bold; 
				font-size: 28rpx;
				
			}
			text{
				color: #333333;
				 
				font-size: 28rpx;
			}
			.rmb{
				color: #277EEF;
				margin-right: 1rpx;
			}
		}
	}	 
	
}
 
</style>
<style>
	.u-radio-group--row{
		justify-content: flex-end !important;
	}
</style>